<template>
    <div class="box">
        <div class="custom-tree-node">
            <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span style="display: inline-block;margin-left: 100px">
                  <el-button type="text" size="mini" @click="() => modified(data)"
                             style="color: #02a6ff">修 改</el-button>
                  <el-button type="text" size="mini" @click="() => append(data)"
                             style="color: #5ce055">添 加</el-button>
                  <el-button type="text" size="mini" @click="() => remove(node, data)" style="color: #fe3950"
                             v-if="node.id!==1">删 除</el-button>
                </span>
              </span>
            </el-tree>
        </div>
        <!--   弹窗-更新组织  -->
        <el-dialog title="组织详情" :visible.sync="editFormVisibleForOrganizationInfo" :show-close="isClose"
                   :close-on-click-modal="isClose" center>
            <el-divider><i class="el-icon-setting"></i></el-divider>
            <el-form :model="organizationForm" :rules="organizationFormRules" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="name" label="">
                    <el-input style="font-size: 16px;" placeholder="请填写组织名称" v-model="organizationForm.name">
                        <template slot="prepend"><i class="el-icon-edit"></i>组织名称：</template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="abbreviation" label="">
                    <el-input style="font-size: 16px;" placeholder="请填写组织简称" v-model="organizationForm.abbreviation" :disabled="true">
                        <template slot="prepend"><i class="el-icon-view"></i>组织简称：</template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="isEnable" label="">
                    <span style="font-size: 16px" v-if="organizationForm.id!==1">是否启用：</span>
                    <el-switch
                            v-model="organizationForm.isEnable"
                            active-color="#13ce66"
                            inactive-color="#ff4949" v-if="organizationForm.id!==1">
                    </el-switch>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="type" label="">
                    <el-input style="font-size: 16px;" v-model="organizationForm.type" disabled="true">
                        <template slot="prepend">所属类型：</template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="parent" label="">
                    <el-input style="font-size: 16px;" v-model="organizationForm.parent" disabled="true">
                        <template slot="prepend">上级组织：</template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="createTime" label="">
                    <el-input style="font-size: 16px;" v-model="organizationForm.createTime" disabled="true">
                        <template slot="prepend">创建时间：</template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="modifiedTime" label="">
                    <el-input style="font-size: 16px;" v-model="organizationForm.modifiedTime" disabled="true">
                        <template slot="prepend">修改时间：</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisibleForOrganizationInfo = false">取 消</el-button>
                <el-button type="primary" @click="updateInfo">确 定</el-button>
            </div>
        </el-dialog>
        <!--   弹窗-新增组织  -->
        <el-dialog title="新增组织" :visible.sync="editFormVisibleForAddOrganization" :show-close="isClose"
                   :close-on-click-modal="isClose" center>
            <el-divider><i class="el-icon-setting"></i></el-divider>
            <el-form :model="addOrganizationForm" :rules="addorganizationFormRules" label-width="0px"
                     class="demo-ruleForm">
                <el-form-item prop="name" label="">
                    <el-input style="font-size: 16px;" placeholder="请填写组织名称" v-model="addOrganizationForm.name">
                        <template slot="prepend"><i class="el-icon-edit"></i>组织名称：</template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="abbreviation" label="">
                    <el-input style="font-size: 16px;" placeholder="请填写组织简称"
                              v-model="addOrganizationForm.abbreviation">
                        <template slot="prepend"><i class="el-icon-edit"></i>组织简称：</template>
                    </el-input>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="isEnable" label="">
                    <span style="font-size: 16px">是否启用：</span>
                    <el-switch
                            v-model="addOrganizationForm.isEnable"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <div style="height: 20px"></div>
                <el-form-item prop="type" label="">
                    <el-cascader
                            placeholder="请选择所属类型"
                            v-model="addOrganizationForm.typeId"
                            :options="organizationType"
                            clearable>
                    </el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisibleForAddOrganization = false">取 消</el-button>
                <el-button type="primary" @click="addOrganization">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import dayjs from "dayjs";

export default {
    data() {
        return {
            // 组织树
            data: [],
            // 弹窗-修改组织信息
            editFormVisibleForOrganizationInfo: false,
            // 是否启用封闭组织
            isClose: false,
            // 组织表单-修改信息
            organizationForm: {
                id: 0,
                parent: '',
                name: '',
                abbreviation: '',
                type: '',
                isEnable: '',
                createTime: '',
                modifiedTime: ''
            },
            // 组织表单规则-修改信息
            organizationFormRules: {
                name: [
                    {required: true, message: '请输入组织名称', trigger: 'blur'}
                ],
                abbreviation: [
                    {required: true, message: '请输入组织简称', trigger: 'blur'}
                ],
                isEnable: [
                    {required: true, message: '请选择是否启用', trigger: 'blur'}
                ]
            },
            // 弹窗-新增组织
            editFormVisibleForAddOrganization: false,
            // 组织表单-新增信息
            addOrganizationForm: {
                parentId: 0,
                name: '',
                abbreviation: '',
                typeId: 0,
                isEnable: true
            },
            // 组织表单规则-新增信息
            addorganizationFormRules: {
                name: [
                    {required: true, message: '请输入组织名称', trigger: 'blur'}
                ],
                abbreviation: [
                    {required: true, message: '请输入组织简称', trigger: 'blur'}
                ],
                isEnable: [
                    {required: true, message: '请选择是否启用', trigger: 'blur'}
                ],
                typeId: [
                    {required: true, message: '请选择所属类型', trigger: 'blur'}
                ]
            },
            //当前数据
            curData: {},
            // 组织类型
            organizationType: []
        }
    },
    mounted() {
        this.loadOrganization();
        this.loadOrganizationType();
    },
    methods: {
        dayjs,
        transformNode(node) {
            return {
                id: node.value,
                label: node.label,
                children: Array.isArray(node.children)
                    ? node.children.map(this.transformNode)
                    : undefined
            };
        },
        loadOrganizationType() {
            let that = this;
            that.$http('/dict/type', 'POST', {
                type: 'organization'
            }, (resp) => {
                let data = resp.data.data;
                if (data.length > 0) {
                    for (let i = 0; i < data.length; i++) {
                        that.organizationType.push({
                            value: data[i].id,
                            label: data[i].name
                        })
                    }
                }
            })
        },
        loadOrganization() {
            let that = this;
            that.$http('/organization/struct', 'POST', null, (resp) => {
                let data = resp.data.data;
                let arr = [];
                arr[0] = data;
                that.data = arr.map(that.transformNode);
                console.log(that.data);
            })

        },
        modified(data) {
            let that = this;
            that.$http('/organization/info', 'POST', {
                id: data.id
            }, (resp) => {
                if (resp.data.code === 20000) {
                    let data = resp.data.data;
                    that.organizationForm.id = data.id;
                    that.organizationForm.name = data.name;
                    if (data.parent === null) {
                        that.organizationForm.parent = '当前为根组织';
                    } else {
                        that.organizationForm.parent = data.parent.name;
                    }
                    that.organizationForm.abbreviation = data.abbreviation;
                    that.organizationForm.type = data.type.name;
                    that.organizationForm.isEnable = data.isEnable;
                    that.organizationForm.createTime = dayjs(data.createTime).format('YYYY-MM-DD HH:mm:ss');
                    that.organizationForm.modifiedTime = dayjs(data.modifiedTime).format('YYYY-MM-DD HH:mm:ss');
                    that.editFormVisibleForOrganizationInfo = true;
                }
            })
        },
        updateInfo() {
            let that = this;
            this.$confirm(`确认对该组织进行信息更新吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.$http('/organization/update', 'PUT', {
                    abbreviation: that.organizationForm.abbreviation,
                    id: that.organizationForm.id,
                    isEnable: that.organizationForm.isEnable,
                    name: that.organizationForm.name
                }, (resp) => {
                    if (resp.data.code === 20000) {
                        that.$message({
                            type: 'success',
                            message: '更新成功!'
                        });
                        that.editFormVisibleForOrganizationInfo = false;
                        location.reload();
                    } else {
                        that.$message({
                            type: 'error',
                            message: '更新失败!'
                        });
                    }
                })
            }).catch(() => {
            })
        },
        append(data) {
            this.editFormVisibleForAddOrganization = true;
            this.addOrganizationForm.parentId = data.id;
            this.curData = data;
        },
        addOrganization() {
            let that = this;
            this.$confirm(`确认添加该组织吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(that.addOrganizationForm)
                that.$http('/organization/add', 'POST', {
                    name: that.addOrganizationForm.name,
                    abbreviation: that.addOrganizationForm.abbreviation,
                    isEnable: that.addOrganizationForm.isEnable,
                    typeId: that.addOrganizationForm.typeId[0],
                    parentId: that.addOrganizationForm.parentId
                }, (resp) => {
                    if (resp.data.code === 20000) {
                        that.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        that.editFormVisibleForAddOrganization = false;
                        location.reload();
                    } else {
                        that.$message({
                            type: 'error',
                            message: '添加失败!'
                        });
                    }
                })
            })
        },
        remove(node,data) {
            if (node.childNodes.length > 0) {
                this.$message({
                    type: 'error',
                    message: '该组织下存在子组织，无法删除!'
                });
            }else {
                console.log(data.id)
                this.$confirm(`确认删除该组织吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http('/organization/delete', 'DELETE', {
                        id: data.id
                    }, (resp) => {
                        if (resp.data.code === 20000) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            location.reload();
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {})
            }
        }
    }
}
</script>
<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    padding-right: 28px;
}
</style>